<template>
  <h1>开关组件</h1>
  <hr>
<!--  开关组件默认由Boolean类型控制开关的 true 打开 false 关闭-->
<!--  还可以使用active-value 和inactive-value来自定义开关的打开和关闭状态 额外支持string和number类型-->
  <el-switch v-model="value1" />
  <el-switch
      v-model="value2"
      class="ml-2"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  />
  <hr>
  是否为管理员<el-switch v-model="isAdmin"></el-switch>
  是否显示图片<el-switch v-model="isShow"></el-switch>
  <hr>
  <img src="fcq.jpg" width="200px" v-if="isShow" />
  <hr>
  <el-switch v-model="num" :active-value="1" :inactive-value="0"></el-switch>
  <el-switch v-model="numStr" :active-value="'1'" :inactive-value="'0'"></el-switch>
  <el-switch v-model="status" active-value="aa" :inactive-value="bb"></el-switch>
</template>
<script setup>
import {ref} from "vue";
const value2 = ref(true);
const value1 = ref(true);
const isAdmin=ref(false);
const isShow=ref(false);

const num=ref(1);
const numStr=ref('1');

const status=ref('bb')




</script>



<style scoped>

</style>